<template>
	<view class="reservation_detail">
		<view class="icon-box">
			<view  v-if="detail.is_pre_book == 0">
				<view>
					<u-icon name="info-circle" color="#f1a532" size="48"></u-icon>
				</view>
				<view>审核中</view>
			</view>
			<view  v-if="detail.is_pre_book == 1">
				<view>
					<u-icon name="checkmark-circle" color="#53c21d" size="48"></u-icon>
				</view>
				<view>预约成功</view>
			</view>
			<view  v-if="detail.is_pre_book == 2">
				<view>
					<u-icon name="close-circle" color="#e45656" size="48"></u-icon>
				</view>
				<view>审核失败</view>
			</view>
			<view  v-if="detail.is_pre_book == 3">
				<view>
					<u-icon name="minus-circle" color="#303133" size="48"></u-icon>
				</view>
				<view>已取消</view>
			</view>
			<view  v-if="detail.is_pre_book == 4">
				<view>
					<u-icon name="man-add" color="#53c21d" size="48"></u-icon>
				</view>
				<view>已取号</view>
			</view>
			<view  v-if="detail.is_pre_book == 5">
				<view>
					<u-icon name="clock" color="#e45656" size="48"></u-icon>
				</view>
				<view>已过期</view>
			</view>
		</view>
		<view class="info-box">
			<view class="list">
				<view>预约业务</view>
				<view style="text-align: right;">{{ detail.servicename }}</view>
			</view>
			<u-line></u-line>
			<view class="list">
				<view>预约大厅</view>
				<view style="text-align: right;">{{ detail.officename }}</view>
			</view>
			<u-line></u-line>
			<view class="list" v-if="detail.YYCode != 0">
				<view>排队号码</view>
				<view style="text-align: right; font-weight: 800; color: red;">{{ detail.YYCode }}</view>
			</view>
			<u-line v-if="detail.YYCode != 0"></u-line>
			<view class="list" v-if="detail.YYCode != 0">
				<view>等待人数</view>
				<view style="text-align: right; font-weight: 800; color: red;">{{ detail.sort }}</view>
			</view>
			<u-line v-if="detail.YYCode != 0"></u-line>
			<view class="list">
				<view>姓名</view>
				<view style="text-align: right;">{{ detail.username }}</view>
			</view>
			<u-line></u-line>
			<view class="list">
				<view>身份证号</view>
				<view style="text-align: right;">{{ detail.idcard }}</view>
			</view>
			<u-line></u-line>
			<view class="list">
				<view>手机号</view>
				<view style="text-align: right;">{{ detail.phone }}</view>
			</view>
			<u-line></u-line>
			<view v-for="item in detail.materials" :key="item.type">
				<view class="list">
					<view>{{ item.name }}</view>
					<view v-show="item.type == 'txt' || item.type == 'file'" style="text-align: right;">{{ item.value }}</view>
					<view v-show="item.type == 'image'" style="text-align: right;">
						<u--image :src="item.value" width="80px" height="80px"></u--image>
					</view>
				</view>
				<u-line></u-line>
			</view>
			<view class="list">
				<view>预约时间</view>
				<view style="text-align: right;">{{ detail.pre_book_time_a && detail.pre_book_time_a.substr(0, 16) }} -- {{ detail.pre_book_time_b && detail.pre_book_time_b.substr(11, 16) }}</view>
			</view>
			<u-line></u-line>
			<view class="list">
				<view>创建预约时间</view>
				<view style="text-align: right;">{{ detail.create_time }}</view>
			</view>
			<u-line></u-line>
			<view class="list">
				<view>更新预约时间</view>
				<view style="text-align: right;">{{ detail.update_time }}</view>
			</view>
			<u-line></u-line>
		</view>
		<view class="tip-box">
			<view v-html="reservationTipText"></view>
		</view>

		<view style="margin-top: 40rpx;" v-if="detail.can_cancelled == 1">
			<u-button type="primary" text="取消预约" @click="handleClearReservation"></u-button>
		</view>
	</view>
</template>

<script>
	import { getReservationDetail, clearReservation, reservationDeatilTip } from '../utils/methods.js'
	export default {
		onShareAppMessage(res) {
			return {
			  title: '石家庄不动产中心',
			  path: '/pages/index'
			}
		},
		onLoad(data) {
			getReservationDetail(data).then(res => {
				if(res.data.code === 0) {
					this.detail = res.data.data
				}
			})
			reservationDeatilTip().then(res => {
				if(res.data.code === 0) {
					this.reservationTipText = res.data.data.html
				}
			})
		},
		data() {
			return {
				detail: {},
				reservationTipText: '',
			}
		},
		methods: {
			handleClearReservation() {
				clearReservation(this.detail.id).then(res => {
					if(res.data.code === 0) {
						uni.showToast({
							title: '取消成功',
							duration: 2000,
							icon: 'success',
						});
						let timer = setTimeout(() => {
							clearTimeout(timer)
							uni.navigateBack({
								delta: 1
							});
						}, 2000)
					} 
					
				}).catch(err => {
					uni.showToast({
						title: '取消失败',
						duration: 2000,
						icon: 'none'
					});
				})
			}
		}
	}
</script>

<style lang="less">
	.reservation_detail {
		padding: 10px 20px;
		box-sizing: border-box;
		.icon-box {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-bottom: 10px;
		}
		.info-box {
			border: 1px solid #f3f3f3;
			border-radius: 5px;
			padding: 10px;
			margin-bottom: 10px;
			box-shadow: 0rpx 2rpx 0rpx 0rpx #ccc;
			.list {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0;
				align-items: center;
			}
		}
		.tip-box {
			border: 1px solid #f3f3f3;
			border-radius: 5px;
			padding: 10px;
			margin-bottom: 10px;
			box-shadow: 0rpx 2rpx 0rpx 0rpx #ccc;
		}
		
		
	}

</style>
